<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统日志</title>
    <script src="/assets/tailwind.js"></script>
    <link href="/assets/fontawesome-free-6.7.2-web/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .shadow-card {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .tab-active {
                @apply border-primary text-primary;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-all-300;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-shield text-primary text-xl"></i>
                <h1 class="text-xl font-bold text-primary">系统日志</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-6">
                <a href="." class="text-gray-600 hover:text-primary transition-all-300 flex items-center">
                    <i class="fa fa-tachometer mr-2"></i> 首页
                </a>
                <a href="auditor-settings.html" class="text-gray-600 hover:text-primary transition-all-300 flex items-center">
                    <i class="fa fa-user-circle mr-2"></i> 密码设置
                </a>
            </nav>
            <div class="flex items-center space-x-4">
                <a href="." class="text-gray-600 hover:text-primary transition-all duration-300 inline-block">
                    <i class="fa fa-bell text-xl"></i>
                </a>
                <div class="relative">
                    <button class="flex items-center space-x-2 focus:outline-none" id="adminDropdownBtn">
                        <img src="https://picsum.photos/200/200?random=1" alt="审计员头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:inline-block font-medium">审计员</span>
                        <i class="fa fa-angle-down text-gray-500"></i>
                        <!-- 下拉菜单（使用 Tailwind 类控制样式和交互） -->
                        <ul id="adminDropdownMenu" class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-lg py-1 hidden">
                            <li>
                            <a href="auditor-settings" 
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-key mr-2"></i> 修改密码
                            </a>
                            </li>
                            <li>
                            <a href="logout" 
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-sign-out-alt mr-2"></i> 登出
                            </a>
                            </li>
                        </ul>
                    </button>
                </div>
                <button class="md:hidden text-gray-600 hover:text-primary transition-all-300">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-5xl mx-auto">
            <!-- 页面标题 -->
            <div class="mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">系统日志</h2>
                <p class="text-gray-500">查看系统的操作日志信息</p>
            </div>

            <!-- 日志表格 -->
            <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                    <h3 class="text-xl font-bold mb-4 md:mb-0">日志列表</h3>
                    <div class="flex space-x-4">
                        <div class="relative">
                            <input type="text" id="log-search" placeholder="搜索日志..."
                                class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all-300 w-full md:w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">级别</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for log in logs %}
                            <tr class="table-row-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.timestamp }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ log.level }}-100 text-{{ log.level }}-800">
                                        {{ log.level }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.username }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.ip }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ log.message }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.detail }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- 分页控件 -->
                <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示第 <span class="font-medium">{{ current_page }}</span> 页，共 <span class="font-medium">{{ total_pages }}</span> 页，总计 <span class="font-medium">{{ total_logs }}</span> 条日志
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                {% if current_page > 1 %}
                                <a href="?page={{ current_page - 1 }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">上一页</span>
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </a>
                                {% endif %}
                                <a href="?page=1" class="{% if current_page == 1 %}relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90{% else %}relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50{% endif %}">
                                    1
                                </a>
                                {% if total_pages > 1 %}
                                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                    ...
                                </span>
                                <a href="?page={{ total_pages }}" class="{% if current_page == total_pages %}relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90{% else %}relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50{% endif %}">
                                    {{ total_pages }}
                                </a>
                                {% endif %}
                                {% if current_page < total_pages %}
                                <a href="?page={{ current_page + 1 }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">下一页</span>
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-gray-500 text-sm">&copy; 2025 北京椰子树信息技术有限公司. 保留所有权利.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="http://www.coconet.cn" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="http://www.coconet.cn" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-file-text-o mr-1"></i> 隐私政策
                    </a>
                    <a href="mailto:goodput3@qq.com" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-phone mr-1"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>
    <script>
        const dropdownBtn = document.getElementById('adminDropdownBtn');
        const dropdownMenu = document.getElementById('adminDropdownMenu');
      
        // 切换菜单显示状态
        dropdownBtn.addEventListener('click', () => {
          dropdownMenu.classList.toggle('hidden');
          // 切换箭头旋转动画（可选）
          dropdownBtn.querySelector('.fa-angle-down').classList.toggle('rotate-180');
        });
      
        // 点击外部关闭菜单
        window.addEventListener('click', (event) => {
          if (!event.target.closest('#adminDropdownBtn, #adminDropdownMenu')) {
            dropdownMenu.classList.add('hidden');
            dropdownBtn.querySelector('.fa-angle-down').classList.remove('rotate-180');
          }
        });
    </script>
</body>

</html>